import { Layout, Spin } from 'antd'
import {
  BrowserRouter as Router,
  Link,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom'
import React, { lazy, Suspense } from 'react'
import './index.scss'
// 导入组件
// import NotFound from '../404'
// import Bill from './page/Bill'
// import Census from './page/Census'
// 懒加载组件
// 账单页面
const Bill = lazy(() => import('./page/Bill'))
// 统计页面
const Census = lazy(() => import('./page/Census'))
// 404页面
const NotFound = lazy(() => import('../404'))

const { Content } = Layout

const Home: React.FC = () => (
  <Router>
    {/* 懒加载 */}
    <Suspense
      // 显示antd组件 加载中
      fallback={
        <div
          className="lazyLoad"
          style={{
            width: '100vw',
            height: '100vh',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Spin size="large" tip="拼命加载中..." />
        </div>
      }>
      {/* 首页总内容区域 */}
      <Layout className="Home">
        <Layout>
          {/* 左侧边栏 */}
          <div className="Sider">
            <h1 className="title">记账系统</h1>
            <div className="list">
              <Link to={'/home/bill'}>账单</Link>
              <Link to={'/home/census'}>统计</Link>
            </div>
          </div>
          {/* 右侧内容区域 */}
          <div className="Content">
            {/* 配置路由 */}
            <Switch>
              <Redirect exact from="/home" to="/home/bill" />
              <Route path="/home/bill" component={Bill} />
              <Route path="/home/census" component={Census} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </Layout>
      </Layout>
    </Suspense>
  </Router>
)

export default Home
